<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['add', 'delete', 'quickSearch']"
            :quick-search-placeholder="t('搜索 账号')"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef">

            <template #supply_rate>
                <el-table-column label="毛利" width="90" align="center">
                    <template #default="scope">
                        <el-link @click="showProfit(scope.row)">设置</el-link>
                    </template>
                </el-table-column>
            </template>
            <template #premium>
                <el-table-column label="补价" width="90" align="center">
                    <template #default="scope">
                        <el-link @click="showPremium(scope.row)">添加</el-link>
                    </template>
                </el-table-column>
            </template>
            <template #carriage>
                <el-table-column label="运费" width="90" align="center">
                    <template #default="scope">
                        <el-link @click="showCarriage(scope.row)">添加</el-link>
                    </template>
                </el-table-column>
            </template>

        </Table>

        <!-- 表单 -->
        <PopupForm />
        <Profit />
        <Premium />
        <Carriage />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, markRaw } from 'vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import { getAllBrandApi } from '/@/api/backend/goods/brand'


import Profit from './profit.vue'; // 毛利
import Premium from './premium.vue'; // 补价
import Carriage from './carriage.vue'; // 运费

defineOptions({
    name: 'user/user',
})



const { t } = useI18n()
const tableRef = ref()


const showProfit = (row: TableRow) => {
    getAllBrandApi(row.id).then((e) => {
        console.log(e)
        if(e.code != 1){
            return;
        }
        baTable.form.operate = 'profit'
        baTable.form.items!.info = row
        baTable.form.items!.info.brandAll = e.data;
    })
}

const showPremium = (row: TableRow) => {
    const currentDate = new Date();
    const formattedDate = `${currentDate.getFullYear()}-${('0' + (currentDate.getMonth() + 1)).slice(-2)}-${('0' + currentDate.getDate()).slice(-2)}`;
    baTable.form.items!.date = formattedDate;
    baTable.form.items!.user_id = row.id;
    baTable.form.items!.money = '';
    console.log(formattedDate);
    baTable.form.operate = 'premium'
}

const showCarriage = (row: TableRow) => {
    const currentDate = new Date();
    const formattedDate = `${currentDate.getFullYear()}-${('0' + (currentDate.getMonth() + 1)).slice(-2)}-${('0' + currentDate.getDate()).slice(-2)}`;
    baTable.form.items!.date = formattedDate;
    baTable.form.items!.user_id = row.id;
    baTable.form.items!.money = '';
    baTable.form.operate = 'carriage'
}




const baTable = new baTableClass(
    new baTableApi('/admin/user.User/'),
    {
        column: [
            { type: 'selection', align: 'center', operator: false },

            {
                label: t('公司名称'), 
                prop: 'userData.company_name', 
                align: 'center', 
                operator: 'LIKE', 
                operatorPlaceholder: t('Fuzzy query'),
            },
            { // 账号
                label: t('user.user.User name'), 
                prop: 'username', 
                align: 'center', 
                operator: 'LIKE', 
                operatorPlaceholder: t('Fuzzy query'),
            },
            
            {
                label: t('手机号码'), 
                prop: 'mobile', 
                align: 'center', 
                operator: 'LIKE', 
                operatorPlaceholder: t('Fuzzy query'),
            },
            {
                label: t('预备金'), 
                prop: 'money', 
                align: 'center', 
                operator: 'LIKE', 
                operatorPlaceholder: t('Fuzzy query'),
            },


            { label: t('毛利'), prop: 'profit',  render: 'slot', slotName: 'supply_rate', operator: false },
            { label: t('补价'), prop: 'id',  render: 'slot', slotName: 'premium', operator: false },
            { label: t('运费'), prop: 'id',  render: 'slot', slotName: 'carriage', operator: false },




            // { // 预备金
            //     label: t('预备金'), 
            //     prop: 'agency_fee', 
            //     align: 'left', 
            //     operator: 'LIKE', 
            //     operatorPlaceholder: t('Fuzzy query'),
            //     render: 'customRender', 
            //     customRender: markRaw(renderMoney),
            // },

            { 
                label: t('创建时间'), 
                prop: 'create_time', 
                align: 'center', 
                render: 'datetime', 
                sortable: 'custom', 
                operator: 'RANGE', 
                width: 160,
                timeFormat: 'mm-dd/hh:MM'
            },
            {
                label: t('Operate'),
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: defaultOptButtons(['edit', 'delete']),
                operator: false,
            },
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {
            userData: {
                company_name: ''
            }
        },
    }
)

baTable.mount()
baTable.getIndex()

provide('baTable', baTable)






</script>

<style scoped lang="scss"></style>
